<template>
	<view>
		<view class="form-box">
			<u-form ref="uForm" label-width="210rpx" :model="form">
				<u-form-item label="联系人" prop="linkName" required>
					<u-input v-model="form.linkName" clearable placeholder="请输入联系人"></u-input>
				</u-form-item>
				<u-form-item label="联系电话" prop="linkTel" required>
					<u-input v-model="form.linkTel" type="number" clearable placeholder="请输入联系电话"></u-input>
				</u-form-item>
				<u-form-item label="公司名称" prop="companyName" required>
					<u-input v-model="form.companyName" clearable placeholder="请输入公司名称"></u-input>
				</u-form-item>
				<u-form-item label="公司地址" prop="companyAddr" required>
					<u-input v-model="form.companyAddr" clearable placeholder="请输入公司地址"></u-input>
				</u-form-item>
				<u-form-item label="营业执照" prop="fileList" required>
					<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" accept="image" capture="camera" multiple :maxCount="2">
					</u-upload>
				</u-form-item>
				<view class="title"></view>
				
				<u-form-item label="公司账户名称" prop="bankCardName" required>
					<u-input v-model="form.bankCardName" clearable placeholder="请输入公司账户名称"></u-input>
				</u-form-item>
				<u-form-item label="账户账号" prop="bankCardNumber" required>
					<u-input v-model="form.bankCardNumber" type="number" clearable placeholder="请输入银行账号"></u-input>
				</u-form-item>
				<u-form-item label="银行名称" prop="bankName" required>
					<picker class="input-select" mode="selector" v-model="queryBanksIndex" :range="queryBanks" range-key="bankName" @change="queryBanksChange">
						<view @click="queryBanksShow = true">
							<u-input v-model="form.bankName" readonly placeholder="请选择开户银行" suffixIcon="arrow-right"></u-input>
						</view>
					</picker>
				</u-form-item>
				<!-- <u-form-item label="所在地区" prop="areaDisplay" required>
					<view class="input-select" @click="showRegion = true">
						<u-input v-model="form.areaDisplay" readonly placeholder="请选择省市区县、乡镇信息" suffixIcon="arrow-right"></u-input>
					</view>
					<city-select v-model="showRegion" :area-code="areaCode" :level="4" @city-change="cityChange"></city-select>
				</u-form-item>
				<u-form-item label="开户行" prop="bankBranch" required>
					<u-input v-model="form.bankBranch" clearable placeholder="请输入开户支行名称"></u-input>
				</u-form-item> -->
				<u-form-item label="公户照片" prop="bankUrls" required>
					<u-upload :fileList="fileList2" @afterRead="afterRead2" @delete="deletePic2" accept="image" capture="camera" multiple :maxCount="2">
					</u-upload>
				</u-form-item>
			</u-form>
		</view>
		<view class="submit-btn">
			<u-button type="success" @click="submit">提交申请</u-button>
		</view>
	</view>
</template>

<script>
	const PAY = require('@/common/pay.js')
	export default {
		data() {
			return {
				queryBanks: undefined,
				queryBanksIndex: -1,
				rules: {
					linkName: [{
						required: true,
						message: '不能为空',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					},{
						min: 2,
						max: 8,
						message: '长度在2-8个字符之间',
					}],
					linkTel: [{
						required: true,
						message: '不能为空',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					},{
						pattern: /^[0-9a-zA-Z]*$/g,
						message: '只能包含字母或数字'
					}],
					companyName: [{
						required: true,
						message: '不能为空',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					companyAddr: [{
						required: true,
						message: '不能为空',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					bankCardName: [{
						required: true,
						message: '不能为空',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					bankCardNumber: [{
						required: true,
						message: '不能为空',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					bankName: [{
						required: true,
						message: '不能为空',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
				},
				form: {
					linkName: undefined,
					linkTel: undefined,
					companyName: undefined,
					companyAddr: undefined,
					companyUrls: undefined,
					bankCardName: undefined,
					bankCardNumber: undefined,
					bankName: undefined,
					bankUrls: undefined,
				},
				fileList: [],
				fileList2: [],
			}
		},
		created() {

		},
		mounted() {

		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(e) {
			this._queryBanks()
		},
		onShow() {
			
		},
		methods: {
			async _queryBanks() {
				const res = await this.$wxapi.queryBanks()
				if(res.code == 0) {
					this.queryBanks = res.data
				}
			},
			queryBanksChange(e) {
				this.queryBanksIndex = e.detail.value
				this.form.bankName = this.queryBanks[this.queryBanksIndex].bankName
			},
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				this.fileList = this.fileList.concat(event.file)
			},
			deletePic(event) {
				this.fileList.splice(event.index, 1)
			},
			async afterRead2(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				this.fileList2 = this.fileList2.concat(event.file)
			},
			deletePic2(event) {
				this.fileList2.splice(event.index, 1)
			},
			submit() {
				this.$refs.uForm.validate().then(res => {
					this._submit()
				}).catch(errors => {
					uni.showToast({
						title: '表单请填写完整',
						icon: 'none'
					})
				})
			},
			async _submit() {
				if(this.fileList.length<1 || this.fileList2.length<1){
					uni.showToast({
						title: '表单请填写完整',
						icon: 'none'
					})
					return
				}
				
				let urls = []
				// 批量上传附件
				if (this.fileList) {
					for (let index = 0; index < this.fileList.length; index++) {
						const pic = this.fileList[index];
						const res = await this.$wxapi.uploadFile2(this.token, pic.url)
						if (res.code == 0) {
							urls.push(res.data.url)
						}
					}
				}
				this.form.companyUrls=JSON.stringify(urls)
				// 批量上传附件
				let urls2 = []
				if (this.fileList2) {
					for (let index = 0; index < this.fileList2.length; index++) {
						const pic = this.fileList2[index];
						const res = await this.$wxapi.uploadFile2(this.token, pic.url)
						if (res.code == 0) {
							urls2.push(res.data.url)
						}
					}
				}
				this.form.bankUrls=JSON.stringify(urls2)
				const res = await this.$wxapi.addDelivery(this.token,this.form)
				if (res.code == 0) {
					uni.showModal({
						showCancel: false,
						title: '成功',
						content: '提交成功',
						confirmText: '知道了',
						success: () => {
							uni.navigateBack()
						}
					})
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			},

		}
	}
</script>
<style scoped lang="scss">
	.form-box {
		padding: 32rpx;
	}
	.input-select {
		width: 100%;
	}
	.title{
	  font-size:28rpx;
	  color:#ccc;
	  padding:32rpx 0;
	}
	.text {
		font-size: 32rpx;
		color: $u-content-color;
	}

	

</style>
